<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例</title>
    <style>
        .box {
            position: relative;
            width: 400px;
            border-bottom: 1px solid #ccc;
            margin: 100px auto;
        }
        
        .box input {
            width: 360px;
            height: 30px;
            border: 0;
            outline: none;
        }
        
        .box img {
            position: absolute;
            top: 10px;
            right: 10px;
            width: 24px;
        }
        
        .contain {
            width: 256px;
            height: 183px;
        }
        
        .contain li {
            list-style: none;
            float: left;
            background-color: pink;
            width: 24px;
            height: 24px;
            margin: 10px 0px 30px 30px;
            background: url('https://img-blog.csdnimg.cn/20200327130918813.png') no-repeat;
            /*这个图片是有规律的排放*/
        }
    </style>
</head>

<body>
    <!-- 模仿睁眼闭眼的操作 -->
    <div class="box">
        <label for="">
            <img src="close-the-eye.png" alt="">
        </label>
        <input type="password" name="" id="">
    </div>
    <script>
        var label = document.querySelector('img'); //可以设置一个id元素多用id更快
        var input = document.querySelector('input');
        var flag = 0; //如果遇到要点击多次的，可以用一个变量记录
        label.onclick = function() {
            if (flag == 0) {
                label.src = 'open-the-eye.png';
                input.type = 'text';
                flag++;
            } else {
                label.src = 'close-the-eye.png';
                input.type = 'password';
                flag = 0;
            }
        }
    </script>
    <!-- //模仿淘宝关闭二维码 -->
    <div class="none" style="display: flex;">
        <div>
            <img id="chahao" style="width: 20px;height: 20px;" src="https://t9.baidu.com/it/u=2869889576,200402777&fm=193" alt="">
        </div>
        <div>
            <img id="erweima" style="width: 200px;height: 250px;" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg3.doubanio.com%2Fview%2Fnote%2Flarge%2Fpublic%2Fp33775751.jpg&refer=http%3A%2F%2Fimg3.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654250533&t=4476e80bde8ea3d42b7bfb1babce553f"
                alt="">
        </div>
    </div>
    <script>
        var chahao = document.getElementById('chahao');
        var none = document.querySelector('.none');
        chahao.onclick = function() {
            none.style.display = 'none'; //他不是删掉，而是将他隐藏起来了，他对应的display是block
        }
    </script>

    <!-- 模仿循环精灵图 -->
    <div class="contain">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script>
        var lit = document.querySelectorAll('li');
        for (var i = 0; lit.length; i++) {
            var index = i * 44;
            lit[i].style.backgroundPosition = '0-' + index + 'px'; //向下排列的，所以Y值是-号
        }
    </script>

    <!-- 显示\隐藏文本框内容 -->
    <input style="color: #999;" type="text" name="" id="hidden" value="手机">
    <script>
        var text = document.querySelector('#hidden');
        text.onfocus = function() { //获得焦点
            if (this.value === '手机') {
                this.value = '';
            }
            text.style.color = '#333';
        }
        text.onblur = function() { //失去焦点
            if (this.value === '') {
                this.value = '手机';
            }
            text.style.color = '#999';
        }
    </script>

    <!-- 排他思想，模仿轮播图的原点 -->
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <script>
        var btns = document.getElementsByTagName('button'); //返回的是一个伪数组
        for (var i = 0; i < btns.length; i++) {
            btns[i].onclick = function() {
                for (var i = 0; i < btns.length; i++) {
                    btns[i].style.backgroundColor = ''; //将所有人的颜色去掉，然后再添加自己的颜色
                }
                this.style.backgroundColor = 'pink';
            }
        }
    </script>
</body>

</html>